<template>
  <div class="list-com-wrap">
    <div class="list-wp">
      <item-note  
        v-for="(item,index) in itemList"
        :key="item.itemId"
        :itemObj="item"
      ></item-note>
      <add-btn></add-btn>
    </div>

    <dlg-com></dlg-com>
  </div>
</template>

<script>
  import ItemNote from "@/components/ItemNote"
  import DlgCom from "@/components/DlgCom"
  import AddBtn from "@/components/AddBtn"
  import {mapState} from "vuex"
  export default {
    name: 'item_list',
    components:{
      ItemNote,
      DlgCom,
      AddBtn
    },
    data () {
      return {
      }
    },
    created() {

    },
    mounted() {
      const vm = this;
      // vm.initList();
    },
    methods:{
      // async initList() {
      //   let list_pre = await fetch("/itemList");
      //   let list = await list_pre.json()
      //   this.itemList = list;
      // },
      onItemDel(obj) {
        // this.clkedItem = obj;
        // this.isShow = true;
        // this.itemList.forEach((item,index,arr) => {
        //   if(item.itemId==id) {
        //     arr.splice(index,1)
        //   }
        // })
      }
    },
    computed:{
      ...mapState(["itemList"]),
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-com-wrap {
    width: 888px;
    overflow: hidden;
    text-align: left;
  }
</style>
